<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>carKeyboard</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/jqToast.js" type="text/javascript"></script>
    <style>
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
            padding: 0;
        }

        html, body {
            margin: 0 auto;
            padding: 0 auto;
            height: 100%;
            -webkit-text-size-adjust: 100%;
            background: -webkit-linear-gradient(#F8FEFF, #CDF7FF); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#F8FEFF, #CDF7FF); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#F8FEFF, #CDF7FF); /* Firefox 3.6 - 15 */
            background: linear-gradient(#F8FEFF, #CDF7FF); /* 标准的语法 */
        }

        div#single-keyboard-box, div#mixed-keyboard-box {
            height: 40%;
            bottom: 0;
            position: fixed;
            width: 100%;
            left: 0;
        }

        .remind_title {
            text-align: center;
            padding-top: 20%;
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 1em;
            /*text-shadow: 0 0 1px #FFF;*/
        }

        .carInput {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            width: 90%;
            margin: 0 auto;
            height: 2.5em;
            background-color: #ffffff;
            border-radius: .2em;
            box-shadow: 0 0 1px 1px #CCCCCC;
        }

        .carInput button {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            position: relative;
            overflow: hidden;
            border-right: 1px solid #f0f0f0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            cursor: pointer;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        }

        .carInput button.selected {
            border: 1px solid #00FF00;
            outline: 1px solid #00FF00;
        }

        .carInput button:last-child {
            border-right: none;
        }

        .carSwitch {
            margin-top: 1em;
            display: block;
            text-align: center;
            font-size: .925em;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .carSwitch input[type="checkbox"] {
            margin-right: .4em;
            width: 1em;
            height: 1em;
        }
    </style>
    <script>
        function goBinding(carNo) {
            alert(carNo);
        }
    </script>
</head>
<body>
<div class="remind_title">请输入车牌</div>
<div class="carInput">
    <button class="selected"></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>
<label class="carSwitch"><input onchange="carSwitch(this);" type="checkbox"/><span>新能源车牌</span></label>

<div id="single-keyboard-box">
    <single-keyboard :args="args" :callbacks="callbacks"/>
</div>
<script src="js/SingleKeyboard.js" type="text/javascript"></script>
</body>
<script>

    var keyboardD = {
        number: "", //车牌号
        type: 2, //0全车牌键盘,1民用,2民用+武警
        province: "", //省份
        energy: 0, //0自动，5新能源
        index: -1  //当前车牌输入序号：-1按照当前预设车牌的长度序号
    };

    function native_callback_completed(number, isAutoCompleted) { //完成的回调 isAutoCompleted-true输入完整车牌号后自动完成；isAutoCompleted-false点击‘确定’完成
//        console.log("当前车牌[完成]：" + number + ", 自动完成:" + isAutoCompleted);
        if (isAutoCompleted && keyboardD.sameChange)return; //自动完成时 改变值一样或不是最后一位 不执行下一步
        goBinding(number);
    }

    function native_callback_onrawkey(text) { //任意按键的回调
    }

    function native_callback_ontextkey(text) { //输入按键的回调
//        console.log("当前输入：" + text);
        $(".carInput button.selected").html(text).next().click();
        _updateKeyboard();
    }

    function native_callback_ondelkey() { //删除键的回调
        var $inputs = $(".carInput button"), $delObj = false;
        $inputs.each(function (i, item) {
            if ($(item).html()) {
                $delObj = $(item);
            }
        });
        if ($delObj) {
            $delObj.html('');
            $delObj.click();
        }
        _updateKeyboard();
    }

    function native_callback_onokkey() { //点击确定的回调 没什么用，未完成时该按钮不可点击，完成后在完成回调中可判断是否点击确定
//        console.log("当前车牌[OK]");
    }

    function native_callback_changed(number, isCompleted) { //键盘变化的回调
//        console.log("当前车牌[变更]：" + number + ", 已完成:" + isCompleted);
        var $input = $(".carInput button");
        $input.each(function (i, item) { //已输入的框的变色
            var $item = $(item);
            if ($item.html()) {
                $item.css({"background-color": "blue", "color": "white"});
            } else {
                $item.css({"background-color": "white", "color": "#000"});
            }
        });
    }

    function native_callback_show_message(message) { //提示信息的回调
//        console.log(message);
        jqOpenToast(message);
    }

    function _updateKeyboard() { //更新键盘
        var inputTemp = "";
        $(".carInput button").each(function (index, item) {
            if ($(item).html()) {
                inputTemp += $(item).html();
            }
        });
        var button1 = $(".carInput button:first-child").html();
        var button3 = $(".carInput button:nth-child(3)").html();
        if (button1 == "W" && isNaN(button3) && $(".carInput button").length < 8) {
            $(".carInput").append("<button></button>");
        } else if ($(".carInput button").length > 7 && keyboardD.energy != 5 && (!isNaN(button3) || button1 != "W")) {
            $(".carInput button:last-child").remove();
            inputTemp = inputTemp.substr(0, inputTemp.length - 1);
        }
        keyboardD.sameChange = keyboardD.number == inputTemp ? true : false; //改变值一样或不是最后一位
        keyboardD.number = inputTemp;
        native_update_keyboard(keyboardD.number, keyboardD.type, keyboardD.province, keyboardD.energy, keyboardD.index);
    }

    _updateKeyboard();

    function carSwitch(e) { //切换新能源车牌
        $(".carInput button").html("");
        $(".carInput button:first-child").click();
        var isNew = $(e)[0].checked;
        if (isNew) {
            keyboardD.energy = 5;
            if ($(".carInput button").length < 8)$(".carInput").append("<button></button>");
        } else {
            keyboardD.energy = 0;
            if ($(".carInput button").length > 7) {
                $(".carInput button:last-child").remove();
            }
        }
        _updateKeyboard();
    }

    $(".carInput").on("click", "button", function (e) { //点击输入框更新键盘
        $("#single-keyboard-box").slideDown();
        var $this = $(e.target), index = $this.index();
        var isDone = false;
        $this.prevAll().each(function (i, item) {
            if ($(item).html() == '') isDone = true;
        });
        if (isDone) return false;
//        console.log($this, index);
        $this.addClass("selected").siblings().removeClass("selected");
        keyboardD.index = index;
        _updateKeyboard();
    });

    $(document).click(function (e) { //点击空白处收起键盘
        var $e = $(e.target);
        var key = $e.parents("#single-keyboard-box");
        var input = $e.parents(".carInput");
        if (key && key.length || input && input.length)return;
        $("#single-keyboard-box").slideUp();
    });
</script>
</html>